<template>
  <div class="enterprise">
    <!-- <div class="search-area">
      <input class="input" @click="searchCompany" placeholder="搜索" />
      <div class="icon">
        <x-icon type="ios-search" size="26" fill="#fff"></x-icon>
      </div>
    </div> -->
    <search
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      :auto-fixed="false"
      top="46px"
      placeholder="搜索企业"
      ref="search"
    ></search>
    <div class="main">
      <div
        class="enterprise-list"
        v-for="(enterprise, index) in enterprises"
        :key="index"
      >
        <div class="enterprise-name">
          <div class="img">
            1
          </div>
          <div>
            {{ enterprise.name }}
          </div>
        </div>
        <div>
          当前企业
        </div>
      </div>
    </div>
    <!-- <div class="btn" @click="loginOutFn">保存</div> -->
  </div>
</template>

<script>
// 引入slider组件
// import 'swiper/dist/css/swiper.min.css';
import { Search } from "vux";
export default {
  components: {
    Search
  },
  name: "enterprise",
  data() {
    return {
      value: "",
      //企业名称
      enterprises: [
        {
          name: "企业名称"
        }
      ]
    };
  },
  created() {},

  mounted() {},
  methods: {
    //搜索公司
    searchCompany() {
      // alert("待开发中");
    },
    //退出登录
    loginOutFn() {
      alert("待开发中");
    }
  }
};
</script>
<style lang="less">
.enterprise {
  .weui-search-bar {
    background-color: transparent;
  }
  .weui-search-bar::after,
  .weui-search-bar::before {
    border: none;
  }
  .weui-search-bar__cancel-btn {
    color: #fff;
  }
}
</style>
<style lang="less" scoped>
.enterprise {
  background: #22233f;
  height: 100vh;
  .enterpriseText {
    color: #000;
  }
  .search-area {
    position: relative;
    padding: 16px;
    .input {
      width: 85%;
      height: 36px;
      padding-left: 32px;
      padding-right: 16px;
      // margin: 20px 5%;
      background: rgba(0, 0, 0, 0.3);
      /*border: #00ffff 1px solid;*/
      line-height: 36px;
      color: rgba(255, 255, 255, 0.8);
      // text-align: center;
      border-radius: 5px;
    }
    .input::placeholder {
      color: rgba(255, 255, 255, 0.8);
    }
    .icon {
      position: absolute;
      top: 21px;
      left: 21px;
    }
  }
  img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 80px;
    left: 45px;
  }
  .main {
    background: rgba(0, 0, 0, 0.4);
    .enterprise-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      color: #fff;
      font-size: 16px;
      border-radius: 10px;
      .enterprise-name {
        display: flex;
        align-items: center;
        .img {
          width: 52px;
          height: 52px;
          img{
            max-width: 100%;
          }
        }
      }
    }
  }
  .btn {
    width: 80%;
    margin: 30% 10% 0 10%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #3967dc;
    border-radius: 25px;
    color: #ffffff;
    font-size: 16px;
  }
}
</style>
